/**
 * @description 拆分后的交易流水组件
 * @author wangjianjun
 */

import React, { PropTypes, PureComponent, Fragment } from 'react';
import { PrimaryC, DATA_ENTRY, AdvancedSearch, FirstHeaderC, TableC } from '../../../../comps';
import uuid from 'es6-uuid';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Input, Button, message, Table, Divider, DatePicker, Select, Modal, Popconfirm } from 'antd';
import styles from '../index.less';
import _ from 'lodash';
const confirm = Modal.confirm;
import { connect } from 'dva';
import 'moment/locale/zh-cn';

@Form.create()
@connect(({ initialSplitM, loading }) => ({
  initialSplitM,
  loading: loading.effects['initialSplitM/queryProductList'],
  loading1: loading.effects['initialSplitM/queryAssignedAsset'],
}))
export default class ProductYield extends PureComponent {
  constructor(props) {
    super(props);
    // this.childObj=[{id:'00eb4b3a55514b72910a7ec492c2bbc0',value:[{assetCode:'3645563415',assetName:'13135122'}]}]

    this.childObj = [];
    this.timestamp = '';
    this.state = {
      columns1: [],
      data1: [],
      columns2: [],
      data2: [],
      expandedRowKeys: [],
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    if (this.props.id) {
      dispatch({
        type: 'initialSplitM/queryProductList',
        payload: {
          seriesProductId: this.props.id,
        },
        callback: (success, res) => {
          if (res) {
            this.childObj = [];
            res.dataSource && res.dataSource.map((item, key) => (item.key = key));
            this.setState({
              columns1: res.columns.filter((item) => item.key != 'createDate'),
              data1: res.dataSource,
              expandedRowKeys: [],
            });
          }
        },
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { dispatch } = this.props;
    if (JSON.stringify(nextProps.id) != JSON.stringify(this.props.id) || JSON.stringify(nextProps.timestamp) != JSON.stringify(this.timestamp)) {
      this.timestamp = nextProps.timestamp;
      dispatch({
        type: 'initialSplitM/queryProductList',
        payload: {
          seriesProductId: nextProps.id,
        },
        callback: (success, res) => {
          if (res) {
            this.childObj = [];
            res.dataSource && res.dataSource.map((item, key) => (item.key = key));
            this.setState({
              columns1: res.columns.filter((item) => item.key != 'createDate'),
              data1: res.dataSource,
              expandedRowKeys: [],
            });
          }
        },
      });
    }
  }

  detailSearch = (expanded, record) => {
    const { dispatch } = this.props;
    if (expanded == true) {
      this.state.expandedRowKeys.push(record.productId);
    } else {
      let newExpandedRowKeys = _.cloneDeep(this.state.expandedRowKeys);
      let newExpandedRowKeys2 = newExpandedRowKeys.filter((item) => item != record.productId);
      this.setState({
        expandedRowKeys: newExpandedRowKeys2,
      });
    }

    if (expanded && record) {
      dispatch({
        type: 'initialSplitM/queryAssignedAsset',
        payload: {
          productId: record.productId,
        },
        callback: (success, res) => {
          if (res) {
            let expandChildData = this.childObj.filter((item) => item.id == record.productId);
            if (Array.prototype.isPrototypeOf(expandChildData) && expandChildData.length === 0) {
              res.dataSource && res.dataSource.map((item, key) => (item.key = key));
              let childData = {
                id: record.productId,
                value: res.dataSource,
              };
              this.childObj.push(childData);
            }

            this.setState({
              columns2: res.columns,
              // data2:res.dataSource,
            });
          }
        },
      });
    }
  };

  expandedRowRender = (record) => {
    this.state.columns2.map((item) => {
      item.dataIndex = item.key;
    });

    let childData2 = [];

    this.childObj.map((item) => {
      if (record.productId == item.id) {
        childData2 = item.value;
      }
    });
    this.state.columns2.map((item) => {
      item.dataIndex = item.key;
      if (item.key == 'allocation') {
        item.width = '10%';
        item.type = 'number';
        item.toFixed = 2;
      }
      if (item.key == 'assetCode') {
        item.width = '10%';
      }
      if (item.key == 'assetName') {
        item.width = '10%';
      }
      if (item.key == 'assetRate') {
        item.width = '10%';
        item.type = 'rate';
        item.toFixed = 4;
      }
      if (item.key == 'assetType') {
        item.width = '10%';
      }
      if (item.key == 'marketValue') {
        item.width = '10%';
        item.type = 'money';
        item.toFixed = 2;
      }
      if (item.key == 'price') {
        item.align = 'right';
        item.width = '10%';
        item.type = 'money';
        item.toFixed = 4;
      }
      if (item.key == 'startDate' || item.key == 'endDate') {
        item.type = 'date';
      }
      if (item.key == 'weight') {
        item.width = '10%';
        item.type = 'rate';
      }
    });
    return (
      <div>
        <div style={{ color: '#444444', paddingLeft: '10px', paddingBottom: '5px' }}>资产信息</div>
        <TableC rowKey={'key'} columns={this.state.columns2} dataSource={childData2} hidePage={true} scroll={{ y: 200 }} />
      </div>
    );
  };

  render() {
    let { columns1 } = this.state;
    if (this.props.type == '2' && columns1 && columns1.length && columns1[columns1.length - 1].key != 'operate') {
      columns1.push({
        key: 'operate',
        type: 'operate',
        title: '操作',
        width: 80,
        operates: [
          {
            title: '手工调整',
            onClick: (record, index) => {
              this.props.showModal(record);
            },
          },
        ],
      });
    }
    columns1.map((item) => {
      item.dataIndex = item.key;
      if (item.key == 'costRate') {
        item.type = 'rate';
        item.width = '10%';
        item.toFixed = 4;
      }

      if (item.key == 'expectedRate') {
        item.type = 'rate';
        item.width = '10%';
        item.toFixed = 4;
      }
      if (item.key == 'productCode') {
        item.width = '10%';
      }
      if (item.key == 'productName') {
        item.width = '10%';
      }
      if (item.key == 'productType') {
        item.width = '13%';
      }
      if (item.key == 'raisedMoney') {
        item.align = 'right';
        item.width = '10%';
        item.type = 'money';
      }
      if (item.key == 'reward') {
        item.width = '10%';
        item.type = 'rate';
        item.toFixed = 4;
      }
      if (item.key == 'startDate' || item.key == 'endDate') {
        item.width = '10%';
        item.type = 'date';
      }
      if (item.key == 'actualRate') {
        item.width = '10%';
        item.type = 'rate';
        item.toFixed = 4;
      }
      if (this.props.type == '2') {
        if (this.props.confirmed == 1 && item.key == 'operate') {
          //拆分确认置灰 同时手工调整也置灰
          delete item.type;
          item.render = (text) => {
            return <a disabled={true}>手工调整</a>;
          };
        } else if (this.props.confirmed == 0 && item.key == 'operate') {
          if (!item.type) {
            item.type = 'operate';
          }
        }
      }
    });
    return (
      <div>
        <TableC
          columns={this.state.columns1}
          dataSource={this.state.data1}
          expandedRowKeys={this.state.expandedRowKeys}
          expandedRowRender={this.expandedRowRender}
          onExpand={(expanded, record) => this.detailSearch(expanded, record)}
          defaultExpandAllRows={false}
          hidePage={true}
          loading={this.props.loading}
          rowKey={(record, index) => record.productId}
          scroll={{ y: 350 }}
        />
      </div>
    );
  }
}
